<template>
  <div class="table-page">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item label="源头群" field="sourceChatRoomId" :show-colon="true">
        <a-select v-model="listParams.sourceChatroomId" placeholder="全部" @change="changeCurrent(1)">
          <a-option :value="item.sourceChatRoomId" v-for="(item, index) in sourceList" :key="index">{{
            item.name
          }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="统计时间" :show-colon="true">
        <a-date-picker
          v-model="time"
          :disabledDate="(current) => dayjs(current).isAfter(dayjs().endOf('date'))"
          @change="timeChange"
        ></a-date-picker>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default> 查询 </template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default> 重置 </template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      id="groupFraction"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
      @sorter-change="onSorterChange"
    >
      <template #repeatGoodsCountScore="{ record }">
        <div class="cursor-pointer text-theme" @click="toDetail(record)">{{ record.repeatGoodsCountScore }}</div>
      </template>
    </GiTable>
    <Repeat ref="RepeatRef" />
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { sourceChatRoomScoreRankData } from '@/apis'
import { useSource } from '@/hooks/app'
import { v4 } from 'uuid'
import dayjs from 'dayjs'
import Repeat from './repeat.vue'

defineOptions({ name: 'groupFraction' })

const columns = ref([
  {
    title: '源头群名称',
    width: 300,
    align: 'center',
    tooltip: true,
    ellipsis: true,
    fixed: 'left',
    dataIndex: 'sourceChatroomName'
  },
  {
    title: '统计日期',
    width: 180,
    align: 'center',
    fixed: 'left',
    dataIndex: 'date'
  },
  {
    title: '总分数',
    width: 120,
    align: 'center',
    dataIndex: 'totalRankScore',
    fixed: 'left',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '新增用户数量',
    width: 150,
    align: 'center',
    dataIndex: 'userAddCountScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '新增用户排名',
    width: 150,
    align: 'center',
    dataIndex: 'userAddCountRank',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '新增用户排名分数',
    width: 180,
    align: 'center',
    dataIndex: 'userAddCountRankScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '用户数量',
    width: 120,
    align: 'center',
    dataIndex: 'userCountScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '用户数量排名',
    width: 150,
    align: 'center',
    dataIndex: 'userCountRank',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '用户数量排名分数',
    width: 180,
    align: 'center',
    dataIndex: 'userCountRankScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: 'GMV',
    width: 120,
    align: 'center',
    dataIndex: 'gmvScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: 'GMV排名',
    width: 120,
    align: 'center',
    dataIndex: 'gmvRank',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: 'GMV排名分数',
    width: 150,
    align: 'center',
    dataIndex: 'gmvRankScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '爆品数量',
    width: 120,
    align: 'center',
    dataIndex: 'hotSaleGoodsCountScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '爆品数量排名',
    width: 150,
    align: 'center',
    dataIndex: 'hotSaleGoodsCountRank',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '爆品数量排名分数',
    width: 170,
    align: 'center',
    dataIndex: 'hotSaleGoodsCountRankScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '重复商品数量',
    width: 150,
    align: 'center',
    dataIndex: 'repeatGoodsCountScore',
    slotName: 'repeatGoodsCountScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '重复商品数量排名',
    width: 170,
    align: 'center',
    dataIndex: 'repeatGoodsCountRank',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '重复商品排名分数',
    width: 170,
    align: 'center',
    dataIndex: 'repeatGoodsCountRankScore',
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  }
])
const loading = ref(false)
const tableData = ref([])
const RepeatRef = ref()
const { pagination, setTotal } = usePagination(() => getTableData(), {
  defaultPageSize: 20
})
const time = ref(dayjs(new Date()).subtract(1, 'day').startOf('day').format('YYYY-MM-DD'))
const listParams = reactive({
  page: 1,
  sourceChatroomId: '',
  startAt: dayjs(new Date()).subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  endAt: dayjs(new Date()).subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss'),
  sort: '',
  orderBy: ''
})

// 获取源头群
const { sourceList, getSourceList } = useSource()
getSourceList()

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await sourceChatRoomScoreRankData(listParams)
    tableData.value = res.data.list.map((item) => {
      return { ...item, id: v4() }
    })
    setTotal(res?.data?.totalCount)
  } finally {
    loading.value = false
  }
}
getTableData()
// // 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

//升降序发生改变
const onSorterChange = (dataIndex, direction) => {
  listParams.sort = direction ? (direction === 'ascend' ? 'asc' : 'desc') : undefined
  listParams.orderBy = listParams.sort ? dataIndex : undefined
  changeCurrent(1)
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.sourceChatroomId = undefined
  time.value = dayjs(new Date()).subtract(1, 'day').startOf('day').format('YYYY-MM-DD')
  listParams.startAt = dayjs(new Date()).subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.endAt = dayjs(new Date()).subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss')
  changeCurrent(1)
}

// 日期改变
const timeChange = (e) => {
  listParams.startAt = dayjs(e).startOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.endAt = dayjs(e).endOf('day').format('YYYY-MM-DD HH:mm:ss')
  changeCurrent(1)
}

const toDetail = (record) => {
  RepeatRef?.value?.addOrEdit(record)
}
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
:deep(.arco-radio-group .arco-radio) {
  margin-right: 10px;
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .btn_wrap {
    dl {
      border-radius: 5px;
      color: #3e3e3e;
    }
    .dl_1 {
      background: rgba(251, 230, 239);
    }
    .dl_2 {
      background: rgba(232, 249, 240);
      dd {
        color: #0fbf60;
      }
    }
    .dl_3 {
      background: rgba(241, 241, 241);
      dd {
        color: rgba(157, 157, 157);
      }
    }
  }
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
.text-theme {
  color: rgb(var(--primary-6));
}
</style>
